/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-07-11 15:32:18
 * @filename : src/components/myProfile.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity
} from 'react-native';

let { width, height } = Utils.size;
import NetWorkImg from '../common/networkImg';
import MyProfileHead from './myProfileHead';
import MyProfilePhoto from './myProfilePhoto';
import MyProfileAbout from './myProfileAbout';
import MyProfileDetails from './myProfileDetails';

class MyProfile extends Component {

    constructor(props) {
        super(props);
        this.state = {
            index : 0,
        };
    }

    componentDidMount() {
        this._scrollView && this._scrollView.scrollTo({
            x: this.state.index * width,
            y: 0,
            animated: false,
        });
    }

    gotoBack() {
        Utils.navGoBack(this.props.navigator)
    }

    render() {
        return (
            <View style={styles.container}>
                <MyProfileHead/>
                <View style={styles.myProfileTabInfo}>
                    <View style={styles.myProfileTabHead}>
                        <TouchableOpacity  style={this.getIndexTabNameStyle(0)}  activeOpacity = {1} onPress={()=>this.goToScrollTo(0)}>
                            <Text style={this.getIndexTextColor(0)}> Photos </Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={this.getIndexTabNameStyle(1)}  activeOpacity = {1} onPress={()=>this.goToScrollTo(1)}>  
                            <Text style={this.getIndexTextColor(1)}> About </Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={this.getIndexTabNameStyle(2)} activeOpacity={1} onPress={()=>this.goToScrollTo(2)}>
                            <Text style={this.getIndexTextColor(2)}> Details </Text>   
                        </TouchableOpacity>   
                    </View> 
                    <View style={styles.myProfileTabContent}>
                        <ScrollView
                            ref={(component) => {this._scrollView = component}}
                            pagingEnabled={true}
                            scrollEventThrottle={1}
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                            onScroll={(e)=>this.onScroll(e)}
                            onScrollAnimationEnd={(e)=>console.log('end')}
                        >
                                <View style={styles.myProfileTabContent}>
                                    <MyProfilePhoto {...this.props}/>
                                </View>

                                <View style={styles.myProfileTabContent}>
                                     <MyProfileAbout {...this.props}/>
                                </View>

                                <View style={styles.myProfileTabContent}>
                                    <MyProfileDetails {...this.props}/>
                                </View>

                        </ScrollView>
                    </View>    
                </View>
            </View>
        );
    }

    getIndexTabNameStyle(index) {
        let tabNameStyle = styles.tabNameView;
        if (index == this.state.index && index == 0) {
            tabNameStyle  = [styles.tabNameView,styles.tabNameIndex,{borderLeftWidth:0}];
        } else if (index == this.state.index) {
            tabNameStyle  = [styles.tabNameView,styles.tabNameIndex];
        }
        return tabNameStyle;
    }

    getIndexTextColor(index) {
        let tabTextStyle = styles.tabName;
        if (index == this.state.index) {
            tabTextStyle = [styles.tabName,{color:'#56ade0'}];
        }
        return tabTextStyle;
    }

    onScroll(e) {
        let pageNum = e.nativeEvent.contentOffset.x/width;
        if (parseInt(pageNum) === pageNum) {
            this.setState({index:pageNum})
        }
    }

    goToScrollTo(index) {
        this.setState({index:index}) 
        this._scrollView && this._scrollView.scrollTo({
            x: index * width,
            y: 0,
            animated: true,
        }); 
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: '#f5f7f8',
    },

    myProfileTabInfo: {
        flex:1,
        width:width,
    },

    myProfileTabHead: {
        height:40,
        flexDirection: 'row',
        backgroundColor:'#fff',
    },

    tabNameView: {
        marginTop:10,
        flex:1,
        borderColor: '#ccc',
        borderLeftWidth:1,
        borderBottomWidth:1,
    },

    tabName: {     
        textAlign:'center',
        lineHeight:20, 
        color:'#666'
    },

    tabNameIndex: {
        borderBottomWidth:2,
        borderBottomColor:'#56ade0',
    },

    myProfileTabContent: {
        flex:1,
        width:width,

    },



});

export default MyProfile;



